<template>
  <el-dialog
    :title="types === 'add' ? '添加分类' : '修改分类'"
    :visible.sync="dialogFormVisible"
  >
    <el-form
      :model="classfiy"
      label-position="left"
      label-width="100px"
      :rules="rules"
    >
      <el-form-item label="分类名称" prop="name">
        <el-input v-model="classfiy.name" style="width: 300px"></el-input>
      </el-form-item>
      <el-form-item label="排序值" prop="sortord">
        <el-input
          type="number"
          v-model="classfiy.sortord"
          style="width: 300px"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false" size="small"
        >取 消</el-button
      >
      <el-button class="primary" @click="addfiy" size="small">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: {
    // 接收父组件传递的数据
    formVisible: Boolean,
    type: String,
    // 需要修改的数据
    updatalist: Object,
  },
  // 首先区分是增加商品还是修改商品
  data() {
    return {
      classfiy: {
        name: "",
        sortord: "",
      },
      dialogFormVisible: this.formVisible,
      types: this.type,
      rules: {
        name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
        sortord: [{ required: true, message: "请输入排序值", trigger: "blur" }],
      },
      listup: {},
    };
  },
  watch: {
    formVisible: function (n, o) {
      this.dialogFormVisible = n;
    },
    dialogFormVisible: function (n, o) {
      this.$emit("update:formVisible", n);
    },
    type: function (n, o) {
      this.types = n;
    },
    updatalist: function (n, o) {
      this.classfiy.name = n.categoryName;
      this.classfiy.sortord = n.categoryRank;
      this.listup = n;
    },
  },
  methods: {
    addfiy() {
      if (this.types == "add") {
        this.$request
          .post(
            "/categories",
            {
              categoryLevel: 1,
              parentId: 0,
              categoryName: this.classfiy.name,
              categoryRank: this.classfiy.sortord,
            },
            {
              headers: {
                "X-Requested-With": "XMLHttpRequest",
                token: localStorage.getItem("token") || "",
                "Content-Type": "application/json",
              },
            }
          )
          .then(({ data }) => {
           
            data.resultCode == 200
              ? this.$message({
                  message: "添加成功",
                  type: "success",
                })
              : this.$message({
                  message: data.message,
                  type: "warning",
                });
          });
      } else {
        this.$request.put(
          "/categories",
          {
            categoryId: this.listup.categoryId,
            categoryLevel: this.listup.categoryLevel,
            parentId: this.listup.parentId,
            categoryName: this.classfiy.name,
            categoryRank: this.classfiy.sortord,
          },
          {
            headers: {
              "X-Requested-With": "XMLHttpRequest",
              token: localStorage.getItem("token") || "",
              "Content-Type": "application/json",
            },
          }
        ).then(({data})=>{
          console.log('修改=',data);
          data.resultCode == 200
              ? this.$message({
                  message: "修改成功",
                  type: "success",
                })
              : this.$message({
                  message: data.message,
                  type: "warning",
                });
        })
      }
      // 重新请求数据
       this.dialogFormVisible = false;

    },
    // 待定
    updata() {
      this.$emit("classfiy", this.classfiy);
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog {
  .el-form-item {
    display: flex;
    align-items: center;
    .imgs {
      width: 100px;
      height: 100px;
      border: 1px solid #ebeef5;
      text-align: center;
      // padding-top: 20px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      .el-icon-plus {
        font-size: 50px;
        color: #ebeef5;
      }
    }
  }
  .primary {
    color: #fff;
    background-color: #1baeae;
    border-color: #1baeae;
  }
}
</style>